<template>
	<view class='entering px10'>
		<u-form :model="form" ref="uForm" :error-type="['toast']">
			<u-form-item label-width='130' prop='name' label="姓名">
				<u-input v-model="form.name" placeholder="请输入姓名"/>
			</u-form-item>
			<u-form-item label-width='130' prop='phone' label="联系电话">
				<u-input v-model="form.phone" type='number' placeholder="请输入联系电话"/>
			</u-form-item>
			<u-form-item label-width='130' prop='rent' label="租金">
				<u-input v-model="form.rent" type='number' placeholder="请输入租金"/>
			</u-form-item>
			<u-form-item label-width='130' prop='guarantee' label="押金">
				<u-input v-model="form.guarantee" type='number' placeholder="请输入押金"/>
			</u-form-item>
			<u-form-item label-width='130' prop='waterNum' label="水表数">
				<u-input v-model="form.waterNum" type='number' placeholder="请输入水表数"/>
			</u-form-item>
			<u-form-item label-width='130' prop='electricNum' label="电表数">
				<u-input v-model="form.electricNum" type='number' placeholder="请输入电表数"/>
			</u-form-item>
			<u-form-item label-width='130' prop='floor' label="选择楼层">
				<u-input v-model="form.floor" placeholder="请选择" @click='showFloor = !showFloor' disabled/>
				<u-select v-model="showFloor" :list="floorList" placeholder='请选择' @confirm='confirm'></u-select>
			</u-form-item>
		</u-form>
		
		<view class='mt20'>
			<u-button @click="submit" type="primary" class='f14'>提交</u-button>
		</view>
		
		<!-- 选择日期 -->
		<!-- <u-calendar v-model="showCal" mode="date" @change="change"></u-calendar> -->
	</view>
</template>

<script>
	const rules = require('utils/rules.js')
	export default {
		data() {
			return {
				showFloor: false,
				showCal: false,
				form: {
					name: null,
					phone: null,
					floor: null,
					rent: null,
					waterNum: null,
					electricNum: null,
					guarantee: null,
				},
				floorList: [
					{ value: 0, label: '二阁楼' },
					{ value: 1, label: '二楼' },
					{ value: 2, label: '三楼' },
					{ value: 3, label: '四楼前' },
					{ value: 4, label: '四楼后' },
				],
				rules: {	
					// 手机号码
					phone: [{
							required: true, 
							message: '请输入账号', 
							trigger: ['blur'],
						},{
							validator: (rule, value, callback) => {
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							trigger: ['blur'],
						}
					],
					floor: [{required: true,message: '请选择楼层',trigger: ['blur']}],
					guarantee: [{required: true,message: '请输入押金',trigger: ['blur']}],
					rent: [{required: true,message: '请输入租金',trigger: ['blur']}],
					waterNum: [{required: true,message: '请输入水表数',trigger: ['blur']}],
					electricNum: [{required: true,message: '请输入电表数',trigger: ['blur']}],
				}
			}
		},
		methods: {
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
					} else {
						console.log('验证失败');
					}
				});
			},
			onBridgeReady(){
			    WeixinJSBridge.invoke(
					'getBrandWCPayRequest', {
						// 公众号ID，由商户传入
						"appId":"wx2421b1c4370ec43b",
						// 时间戳
						"timeStamp":"1395712654",  
						// 随机串
						"nonceStr":"e61463f8efa94090b1f366cccfbbb444",
						"package":"prepay_id=u802345jgfjsdfgsdg888", 
						// 微信签名方式
						"signType":"MD5",
						// 微信签名
						"paySign":"70EA570631E4BB79628FBCA90534C63FF7FADD89"
					},
					function(res){
						if(res.err_msg == "get_brand_wcpay_request:ok" ){
							// 使用以上方式判断前端返回,微信团队郑重提示：
							// res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
						}
					}
				); 
			},
			pay() {
				if (typeof WeixinJSBridge == "undefined"){
				    if( document.addEventListener ){
				        document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady, false);
				    }else if (document.attachEvent){
				        document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady); 
				        document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady);
				    }
				} else{
				   this.onBridgeReady();
				}
			},
			// 日期选择
			change(res) {
				console.log('2021-5-8 09:40:30', res);
			},
			// 选择楼层
			confirm(e) {
				this.form.floor = e[0].label
			}
		},
		onReady() {
			this.$refs.uForm.setRules({ ...rules.rules, ...this.rules });
		}
	}
</script>

<style>

</style>
